<template>
  <div class="body">
    <div class="hexagon" aria-label="Animated hexagonal ripples">
      <div class="hexagon__group">
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
      </div>
      <div class="hexagon__group">
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
      </div>
      <div class="hexagon__group">
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
      </div>
      <div class="hexagon__group">
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
      </div>
      <div class="hexagon__group">
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
      </div>
      <div class="hexagon__group">
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
        <div class="hexagon__sector"></div>
      </div>
    </div>
    <p aria-label="Loading" >Loading</p>
  </div>
</template>

<script>
export default {
  created() {
    setTimeout(()=>{
      this.$router.push("/");
    },1500)
  },
  components: {
    'remote-css': {
      render(createElement) {
        return createElement('link', { attrs: { rel: 'stylesheet', href: this.href }});
      },
      props: {
        href: { type: String, required: true },
      },
    },
    'remote-js': {
      render(createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
      },
      props: {
        src: { type: String, required: true },
      },
    },

  },
  name: "loading"
}
</script>
<style>
@import "../assets/css/loading.css";
</style>
